<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul> -->
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script>
        //vue 2.0   1>不能直接通过下标去给数组赋值 arr[0] = 'xxx' 2>不能通过length去置空  arr.length = 0

        


        // let vm = new Vue({
        //     el:'#app',
        //     data:{
        //         arr:[1,2,3],
        //         product：{title:'dsdsd'}
        //     }
        // })

        // console.log(vm);

        // // vm.arr[1] = 'hello';

        // // vm.arr.length = 0;

        // vm.arr.splice(0,1,'hello');

        // //splice push pop unshift shift sort reverse

        // console.log(vm.arr);

        // let value = 0;

        // let list = [value,2,3];

        // let value = 'lili';

        // let obj = {name:value,age:10};  obj.name 

        // Object.defineProperty(obj,'name',{
        //     set(newVal){
        //         console.log("设置值")
        //         value = newVal
        //     },
        //     get(){
        //         console.log("获取值")
        //         return value
        //     }
        // })

        // arr.forEach((item,index,arr) => {
        //     Object.defineProperty(arr,index,{
        //         get(){
        //             console.log("获取值")
        //             return item
        //         },
        //         set(newVal){
        //             console.log("设置值")
        //             // arr[index] = newVal  //
        //         }
        //     })
        // })

        //Object.defineProperty()  是可以对数组下标进行劫持的，但是vue没用  ======>   性能？？？？？？？
        // Object.defineProperty(list,0,{
        //     get(){
        //         return value
        //     },
        //     set(newVal){
        //         console.log("设置值")
        //         value= newVal;
                
        //         // arr[key] = newVal
        //     }
        // })
        // list[0] = 'hello';

        // console.log(arr);

        let app = document.querySelector('#app');

        let list = [1,2,3];

        let originProto = Array.prototype;  //数组原型对象

        console.log(originProto)

        //Object.create()  

        let newProto = Object.create(originProto);  //1.创建一个新对象，把基于数组的原型对象作为新对象的__proto__

        console.log(newProto);

        newProto.push = function(){
            console.log("===push")
            originProto.push.apply(this,[...arguments]);
            app.innerHTML = list;
        }

        list.__proto__ = newProto;

        list.push(8);

        // Array

        // let arr = new Array(10);
        // // console.log(arr);

        console.dir(Array)

        // console.log(arr);

        // console.log(arr.__proto__ === Array.prototype)

        //构造函数上有prototype === 实例上有__proto__ ：true

        // arr.push(9);

        //proxy

        let product = {title:'水杯'}

        let state = new Proxy(product,{
            set(obj,key,value){
                obj[key] = value;
                console.log("设置值====")
            },
            get(obj,key){
                console.log("获取值")
                return obj[key]
            }
        })

        // state[0] = 100000;

        // console.log(state[0])

        state.title = '手机';
        console.log(state.title)

        // function Array(){

        // }

        let Array = new Function()
    </script>
</body>
</html>